<script>
export default {
    name: "ta-line",
  functional: true,
  render(clearElement, context) {
    console.log("line context", context);
    let { color, size, style, margin, padding } = context.props;
    let lineSize = size + "px";
    let defaultColor = "#c3c3c3";
    let defaultStyle = "dashed";
    let lineStyleArr = ["solid", "dashed"];
    style = lineStyleArr.find((e) => e == style) ?? defaultStyle;

    return clearElement("div", {
      class: "overall-line overall-line-solid",
      style: {
        "border-width": lineSize,
        "border-color": color || defaultColor,
        "border-style": style,
        margin,
        padding,
      },
    });
  },
};
</script>

<style scoped lang="scss">
.overall-line {
  border-width: 1px;
}
.overall-line-solid {
  border-style: solid;
}
.overall-line-dashed {
  border-style: dashed;
}
</style>
